<script setup>
import { ref ,computed} from 'vue';
import router from '@/router';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import LayoutNav from '../Layout/components/LayoutNav.vue';
import { Headset } from '@element-plus/icons-vue';
import { getGoodsListAPI,getStoreInfoAPI } from '@/api/store'
import { useTokenStore } from '@/store/token'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';


const storeInfo = ref({})

const route = useRoute()
const getstoreInfo = async () => {
  console.log('userId:',route.params.userId)
  const res = await getStoreInfoAPI(route.params.userId)
  // console.log(res.data)
  storeInfo.value = res.data
  console.log('storeId:',storeInfo.value.storeId);
}
getstoreInfo()

// const goodList = ref([])
const goodList = ref([])

const getGoodsList = async () => {
  const res = await getGoodsListAPI(route.params.userId)
  console.log(res.data)
  goodList.value = res.data
}
getGoodsList()

const styleList = computed(() => {
 // 使用 Map 来去重并保持 styleId 和 styleName 的对应关系
  const styleMap = new Map(
    goodList.value.map(item => [item.style_id, item.style_name])
  )
  
  return [
    { id: 0, name: '全部宝贝' },
    ...Array.from(styleMap).map(([id, name]) => ({
      id,
      name
    }))
  ]
})
const activeStyle = ref(0)

// 根据选中的款式过滤商品
const filteredGoods = computed(() => {
  if (activeStyle.value === 0) {
    return goodList.value // 返回全部商品
  }
  return goodList.value.filter(item => item.style_id === activeStyle.value)
})

// 处理分类点击
const handleStyleClick = (style_id) => {
  activeStyle.value = style_id
}

const currentPage = ref(1)
const pageSize = ref(12)

// 分页后的商品列表
const paginatedGoods = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredGoods.value.slice(start, end)
})

// 总数
const total = computed(() => filteredGoods.value.length)

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
}

//跳转商品详情
const goToGoodDetail = (id) => {
  const routeData = router.resolve({
    name: 'goodDetail',
    params: { userId: storeInfo.value.storeId, goodId: id }
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}
//跳转客服
const tokenStore = useTokenStore()
const goToCustomerService = () => {
  // 检查是否登录
  if (!tokenStore.user) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  const routeData = router.resolve({
    name: 'custermer'
  })
  // 在新窗口打开
  window.open(routeData.href, '_blank')
}

</script>

<template>
  <LayoutNav />
  <div class="container">
    <!-- 店铺信息部分 -->
    <div class="shop-header">
      <div class="box-left">
        <div class="left-img">
          <img class="shop-img" :src="'https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/46117677885/45b8/dd8b/0039/c69a6125997cc259cb9709c4b9d2539e.jpg'" />
        </div>
      </div>
      <div class="shop-container">
        <ul>
          <li><h2 class="name">{{ storeInfo.storeName }}</h2></li>
          <li class="desc">{{ storeInfo.description }}</li>
          <li class="desc">开店时间<span>{{ storeInfo.createTime }}</span></li>
          <li>店铺热线<span>{{ storeInfo.phone }}</span></li>
          <li class="location">{{ storeInfo.location }}</li>    
        </ul>
      </div>
      <div class="customer-service" @click="goToCustomerService">
        <el-icon><Headset /></el-icon>
        <p>客服</p>
      </div>
    </div>

    <!-- 商品展示部分 -->
    <div class="good-box">
      <!-- 左侧分类 -->
      <div class="side">
        <h3>商品分类</h3>
        <ul class="style-list">
          <li 
            v-for="style in styleList" 
            :key="style.id"
            :class="{ active: activeStyle === style.id }"
            @click="handleStyleClick(style.id)"
          >
            {{ style.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧商品列表 -->
      <div class="goods-container">
        <div class="goods-list">
          <div v-for="good in paginatedGoods"
            :key="good.id" 
            class="goods-item" 
            @click="goToGoodDetail(good.good_id)">
            <el-image :src="good.images" fit="cover" />
            <div class="goods-info">
              <h4 class="name ellipsis">{{ good.good_name }}</h4>
              <p class="desc ellipsis">{{ good.description }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </div>  
          </div>
        </div>

          <!-- 分页 -->
        <el-pagination 
          class="pagination"
          v-if="total > 0"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </div>
  <LayoutFooter />
</template>

<style scoped lang="scss">

// 店铺信息样式
.shop-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-top:20px;

  .box-left {
    width: 150px;
    
    .left-img {
      width: 150px;
      height: 150px;
      border-radius: 8px;
      overflow: hidden;
      
      .shop-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .shop-container {
    flex: 1;
    padding: 0 30px;

    ul li {
      margin-bottom: 8px;
      
      span {
        margin-left: 10px;
        color: #666;
      }
      
      &.location {
        color: #999;
      }
    }
  }

  .customer-service {
    cursor: pointer;
    text-align: center;
    
    .el-icon {
      font-size: 30px;
      color: #999;
    }
    
    p {
      margin-top: 5px;
    }
  }
}

// 商品展示样式
.good-box {
  display: flex;
  gap: 20px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 100vh;

.side {
  width: 200px;
  background: #fff;
  padding: 20px 0;

  h3 {
    padding: 0 20px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
  }

  .style-list {
    li {
      padding: 12px 20px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;

      &:hover {
        color: #FA5566;
        background: #FBEBEB;
      }

      &.active {
        color: #FA5566;
        background: #FBEBEB;
      }
    }
  }
}

  .goods-container {
    flex: 1;
    position: relative;
    .pagination{
      position: absolute;
      bottom: 0;
    }
  }

  .goods-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;

    .goods-item {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      }

      .el-image {
        width: 100%;
        height: 200px;
      }

      .goods-info {
        padding: 15px;

        .name {
          font-size: 16px;
          margin-bottom: 8px;
        }

        .desc {
          font-size: 14px;
          color: #999;
          margin-bottom: 8px;
          height: 40px;
        }

        .price {
          color: #ff6b81;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}

// 工具类
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>